import React,{useEffect,useState} from "react";
import {getCardApi} from "../../api/card.js"
import {listToTree} from "../../utils"
import { Tabs,Card } from 'antd';
import './index.css'
const Home = () => {
  const [list, setList] = useState([]) // tabs数据
  const [resData,setresData] = useState([]) // 请求的数据
  const [currentChildren, setcurrentChildren] = useState([]) // 当前tabs的子数据
  useEffect(() => {
    getCardApi().then(res => {
      if (res.code === 200) {
        const resData = res.data
        const treeData = listToTree(resData)
        const List = treeData.map((item)=>{
          return {
            key: item.id,
            label: item.name,
            children:''
          }
        })
        setList(List)
        setresData(treeData)
        setcurrentChildren(treeData[0].children)
      }
    })
  },[])

  const onChange = (key) => {
    console.log(key,resData);
    console.log(currentChildren);
    resData.forEach(item=>{
      if(item.id === key){
        setcurrentChildren(item.children)
      }
    })
  };

  return (
    <div>
      <Tabs defaultActiveKey="1" items={list} onChange={onChange} />
      <div className="card-box">
          {
            currentChildren.map((item)=>{
              return (
                <Card key={item.id} className="item">
                  <div className="left">
                  <img src={item.icon} alt="avatar" />
                  </div>
                  <div className="right">
                    <div className="title">{item.name}</div>
                    <div className="title">{item.depict}</div>
                  </div>
                </Card>
              )
            })
          }
      </div>
     </div> 

  )
}
export default Home